<script lang="ts" setup>
import apply from '@/api/apply'
import { useApplyStore, useAuthStore } from '@/store'

const { token, openid, sessionid, loginMode } = storeToRefs(useAuthStore())
const applyStore = useApplyStore()

const {
  phoneNumber
} = storeToRefs(applyStore)

const query = ref({})
onLoad((options: any) => {
  query.value = options
})

onMounted(() => {
  wx.login({
    success: async (res) => {
      if (res.code) {
        const { data } = await apply.getOpenID(res.code)
        openid.value = data?.data?.openid
      }
    },
  })
})

const form = ref({
  phone: '',
  code: '',
})
const second = ref(0)
const interval = ref()
async function getCode() {
  if (form.value.phone === '') {
    uni.showToast({
      icon: 'none',
      title: '请先输入手机号',
    })
  }
  else {
    const { data } = await apply.sendSMS(form.value.phone)
    if (data.status === 'success') {
      second.value = 60
      interval.value = setInterval(() => {
        second.value = second.value - 1
        if (second.value <= 0) {
          second.value = 0
          clearInterval(interval.value)
        }
      }, 1000)
    }
  }
}
const confirm = ref(false)
const loading = ref<boolean>(false)
async function login() {
  if (form.value.phone !== '' && form.value.code !== '') {
    if (confirm.value) {
      loading.value = true
      const { data } = await apply.verifyAndLogin(form.value.phone, form.value.code)
      if (data.status === 'success') {
        // 保存token和sessionid
        sessionid.value = data.data.sessionid
        token.value = data.data.token
        phoneNumber.value = form.value.phone
        loginMode.value = 'apply'
        // 根据from跳转页面
        if (query.value.from) {
          switch (query.value.from) {
            case 'select':
              await applyStore.getApplyInfo(query.value.select)
              break
            case 'applyIndex':
              uni.redirectTo({
                url: '/pages-sub/apply/list',
              })
              break
          }
        }
      }
      else {
        loading.value = false
      }
      loading.value = false
    }
    else {
      uni.showToast({
        icon: 'none',
        title: '请先接受协议',
      })
    }
  }
  else {
    uni.showToast({
      icon: 'none',
      title: '请输入验证码',
    })
  }
}

function goRule() {
  uni.navigateTo({
    url: '/pages-sub/apply/agreement',
  })
}
</script>

<template>
  <div class="li-login">
    <div class="li-login-title">商户进件</div>
    <div class="li-login-sub">请使用商户联系人手机号</div>
    <div>
      <nut-form :model-value="form">
        <nut-form-item>
          <nut-input v-model="form.phone" type="number" placeholder="请输入手机号" input-class="li-login-ipt"
            placeholder-class="li-login-iptpl" max-length="11" />
        </nut-form-item>
        <nut-form-item>
          <nut-input v-model="form.code" type="number" placeholder="请输入验证码" input-class="li-login-ipt"
            placeholder-class="li-login-iptpl" max-length="6">
            <template #right>
              <div class="li-login-ipt-btn" v-if="second === 0" @click="getCode">获取验证码</div>
              <div v-else class="li-login-ipt-btndis">{{ second }}</div>
            </template>
          </nut-input>
        </nut-form-item>

      </nut-form>
      <div class="rules">
        <div class="left">
          <nut-checkbox v-model="confirm" />
        </div>
        <div class="right">
          我已仔细阅读并接受
          <span class="rule" @click="goRule">《绵阳市商业银行股份有限公司隐私政策》</span>
        </div>
      </div>
      <nut-button type="primary" custom-class="login-btn shake_o" :loading="loading" block
        @click="login">登录</nut-button>
    </div>
  </div>

  <!-- <div class="login">
    <div class="top">
      <div class="title">商户进件</div>
      <div class="desc">请使用商户联系人手机号</div>
      <nut-divider :custom-style="{ color: '#e8e8e8' }" />
      <div class="form">
        <nut-form :model-value="form">
          <nut-form-item label="手机号" label-align="center">
            <nut-input v-model="form.phone" type="number" placeholder="请输入手机号" />
          </nut-form-item>
          <nut-form-item label="验证码" label-align="center">
            <nut-input v-model="form.code" type="number" placeholder="请输入验证码">
              <template #right>
                <nut-button v-if="second === 0" type="primary" size="small" @click="getCode">获取验证码</nut-button>
                <nut-button v-else type="primary" size="small" disabled>{{ second }}</nut-button>
              </template>
            </nut-input>
          </nut-form-item>
        </nut-form>
      </div>
      <div class="rules">
        <div class="left">
          <nut-checkbox v-model="confirm" />
        </div>
        <div class="right">
          我已仔细阅读并接受
          <span class="rule" @click="goRule">《绵阳市商业银行股份有限公司隐私政策》</span>
        </div>
      </div>
    </div>
    <div class="button">
      <nut-button type="primary" :loading="loading" block @click="login">登录</nut-button>
    </div>
  </div> -->
</template>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "商户进件",
    "backgroundColorContent": "#ffffff"
  }
}
</route>

<style lang="sass" scoped>
.login
  .top
    background-color: #fff
    text-align: center
    padding: 30px
    .title
      font-weight: bold
      font-size: 20px
      margin-bottom: 10px
    .desc
      color: #8e8e8e
      margin-bottom: 40px
    .form
      margin: 40px 0
    .rules
      padding: 0 20px
      display: flex
      .left
        width: 30px
      .rule
        color: #2196F3
  .button
    margin: 40px 20px

.rules
  padding: 0 20px
  display: flex
  .left
    width: 30px
  .rule
    color: #2196F3

.li-login
  width: 600rpx
  margin-left: 75rpx

:deep(.nut-cell-group__wrap)
  border-radius: 0!important
  box-shadow: none

:deep(.nut-cell-group__wrap .nut-cell)
  height: 100rpx
  background-color: #f8f8f8
  margin-bottom: 30rpx
  border-radius: 50rpx

:deep(.nut-form-item__body)
  justify-content: center

:deep(.li-login-ipt)
  color: #333

:deep(.li-login-iptpl)
  color: #d6d6d6

.li-login-ipt-btn
  color: #2196F3

.li-login-ipt-btndis
  color: #BBDEFB

.li-login-title
  font-size: 50rpx
  margin-top: 50rpx
  margin-left: 15rpx

.li-login-sub
  font-size: 28rpx
  color: #666666
  margin-top: 20rpx
  margin-bottom: 40rpx
  margin-left: 15rpx

:deep(.login-btn)
  width: 100%
  height: 85rpx
  margin-top: 30rpx
  background-color: #2196F3!important

</style>
